﻿
<html>
    <head>
        <meta charset="utf-8">
        <title>Nodejs - 電腦網頁</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="./js/socket.io.js"></script>
        <style type="text/css">
            #main {
                display: none;
            }
        </style>
        <script type="text/javascript">
            // 用來產生類似 GUID 的字串
            function S4() {
               return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
            }
 
            function NewGuid() {
               return (S4()+S4());
            }
             
            $(document).ready(function(){
                var nodejs_server = "localhost:8081";
                
                var key = NewGuid();
                console.log(key);
                $("#qrcode").append("<img src='http://chart.apis.google.com/chart?chs=300x300&cht=qr&chl=./phone.html?key=" + key + "&choe=UTF-8' />");
                var phoneLink = "./phone.html?key=" + key;
                $("#str").attr("href", phoneLink).html(phoneLink);
                // NodeJS Server
               

               // alert("22");
                // 進行 connect
                var socket = io.connect("http://" + nodejs_server);
 
                // 偵聽 nodejs 事件
                socket.on("get_response", function (b) {
                    
                    var combine = b.key + "_" + b.act;
                    console.log(combine);
                     
                    switch (combine) {
                         
                        // 當擁有特定 KEY 的使用者打開手機版網頁，觸發 enter 事件，就會將 qrcode 隱藏，並秀出一張圖
                        case key + "_enter":
                 
                            setTimeout(function () {
                             
                                $("#qrcode").hide();
                                
                                $("#main").show();
                             
                            }, 500);
                            break;
 
                        // 當擁有特定 KEY 的使用者在手機版網頁中，觸發 changebg 事件，就會將網頁的背景顏色隨機變換
                        case key + "_changebg":
                            setTimeout(function () {
                             
                                var str = "0123456789abcdef", t = "";
                                for (j = 0; j < 6; j++) {
                                    t = t + str.charAt(Math.random() * str.length);
                                }
                             
                                $("body").css("background-color", t);
                             
                            }, 500);
                        break;
                         
                         case key + "_inputMsg":
                              $("#msgArea").html(b.msg);
                         break;
                    }
                });
             
            });
        </script>
    </head>
<body>
 
        <div id="qrcode"></div>
        <a id="str" style="margin-top:20px;" href="#" target="_blank"></a>
        <div id="main" style="position: relative;">
        <div>Hula Boy</div>
        <div id="msgArea" style="font-size:40; left:50px; position:absolute; color:white; top:300px;"></div>
        <img src="amber.jpg" /></div>
 
</body>
</html>